<template>
    <div class="wrapper">
        <HeaderNav title="产品详情">
            <div slot="right">
                <SvgIcon icon="icon-xingzhuangcheng" @click.native="$router.push('/')"
                         style="font-size: 20px"></SvgIcon>
            </div>
        </HeaderNav>
        <!--swiper-->
        <DSwiper></DSwiper>
        <!--profile-->
        <div class="profile">
            <div class="left">
                <div class="h1">{{design.title}}</div>
                <div class="price">
                    <span>￥{{80.00}}</span>
                    <small>起1米</small>
                </div>
            </div>
            <div class="right">
                <img src="https://m.diyeetech.com/static/designItems/puliaoicon.png" alt="">
                布料详情
            </div>
        </div>

        <!--tags -->
        <div class="tags">
            <div class="label">标签：</div>
            <div class="tags_content">
                <div class="tag_item">重叠</div>
                <div class="tag_item">重叠</div>
                <div class="tag_item">重叠</div>
            </div>
        </div>

        <!--shop item-->
        <div class="shop_item_wrapper">
            <ShopListItem class="item"></ShopListItem>
            <div class="more">
                查看更多
            </div>
        </div>
        <!--bottom-->
        <Dbottom></Dbottom>

        <!--product desc images-->
        <div class="product_desc_images">
            <img src="https://www.diyeetech.com/static/designItems/1.jpg" alt=""/>
            <img src="https://m.diyeetech.com/static/designItems/2.jpg" alt="">
            <img src="https://m.diyeetech.com/static/designItems/3.jpg" alt="">
        </div>




    </div>
</template>
<script>
    import SvgIcon from '../../components/svgIcon'
    import HeaderNav from '../../components/HeaderNav'
    import ShopListItem from '../../components/shopListItem'
    import DSwiper from './swiper'
    import Dbottom from './bottom'
    import {get_design} from "./service";

    export default {
        components: {
            HeaderNav, DSwiper, SvgIcon, ShopListItem, Dbottom
        },
        data() {
            return {design: {}}
        },
        methods: {},
        mounted() {
            var self = this
            var designId = this.$route.params.id

            $('html,body').animate({scrollTop: '0px'}, 800);
            //get design Detail
            get_design(designId).then(design => {
                self.design = design
            })

        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        .profile {
            margin-left: px2rem(20);
            margin-right: px2rem(20);
            display: flex;
            justify-content: space-between;
            .left {
                .h1 {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 10px;
                }
                .price {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 10px;
                    color: orangered;
                    & small {
                        margin-left: 5px;
                        font-size: 12px;
                    }
                }
            }
            .right {
                display: flex;
                align-items: center;
                flex-direction: column;
                img {
                    width: 35px;
                    height: 35px;
                }
            }
        }

        .tags {
            margin-left: px2rem(20);
            margin-right: px2rem(20);
            display: flex;
            .label {
                font-size: 12px;
                color: #d5d5d5;
                margin-top: 3px;
            }
            .tags_content {
                display: flex;
                .tag_item {
                    font-size: 12px;
                    color: #d5d5d5;
                    margin-right: 5px;
                    border-radius: 5px;
                    border: 1px solid #d5d5d5;
                    padding: 2px;
                }
            }
        }

        .shop_item_wrapper {
            margin-left: px2rem(20);
            margin-right: px2rem(20);
            margin-top: 20px;
            display: flex;
            .more {
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
            }
        }
        .product_desc_images {
            margin-top: 20px;
            img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
</style>